<template>
    <base-dialog v-bind="$attrs" v-on="$listeners" :title="title" size="medium" @submit="toAdd"  :disabled="disabled">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" :disabled="disabled">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="formData.username" :disabled="!!formData.id"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12"
            >
              <el-form-item label="姓名" prop="alias">
                <el-input v-model="formData.alias"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="工号" prop="identity">
                <el-input v-model="formData.identity"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <gender-form-item v-model="formData.gender"></gender-form-item>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="证件类型" prop="idcard_type">
                <el-select
                  v-model="formData.idcard_type"
                  placeholder="请选择证件类型"
                  style="width:100%"
                  clearable
                >
                  <el-option :value="0" label="身份证"></el-option>
                  <el-option :value="1" label="临时身份证"></el-option>
                  <el-option :value="2" label="护照"></el-option>
                  <el-option :value="3" label="境外永久居住证"></el-option>
                  <el-option :value="4" label="其他"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12"
            >
              <el-form-item label="证件号码" prop="idcard">
                <el-input v-model="formData.idcard" placeholder="请输入证件号码" show-word-limit clearable
                          :style="{width: '100%'}"  :maxlength="18"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机" prop="phone">
                <el-input v-model="formData.phone"></el-input>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item label="办公电话" prop="tel">
                <el-input v-model="formData.tel"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker v-model="formData.birthday" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{width: '100%'}" placeholder="请选择出生日期" clearable :picker-options="pickerOptions0"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12"
            >
              <el-form-item label="工作时间" prop="work_time" class="two-line">
                <el-date-picker v-model="formData.work_time" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{width: '100%'}" placeholder="请选择参加工作时间" clearable  :picker-options="pickerOptions0" ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="行政级别" prop="xzjb">
                <el-select
                  v-model="formData.xzjb"
                  placeholder="请选择行政级别"
                  style="width:100%"
                  clearable
                >
                  <el-option :value="0" label="未知"></el-option>
                  <el-option :value="1" label="科员"></el-option>
                  <el-option :value="2" label="副科级"></el-option>
                  <el-option :value="3" label="正科级"></el-option>
                  <el-option :value="4" label="副处级"></el-option>
                  <el-option :value="5" label="正处级"></el-option>
                  <el-option :value="6" label="副厅级"></el-option>
                  <el-option :value="7" label="正厅级"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12"
            >
              <el-form-item label="人员类别" prop="personnel_classification">
                <el-select v-model="formData.personnel_classification" placeholder="请选择人员类别" clearable :style="{width: '100%'}">
                  <el-option label="在编在岗" :value="1"></el-option>
                  <el-option label="人事代理" :value="2"></el-option>
                  <el-option label="劳动合同用工" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="在职" prop="is_active">
                <el-radio-group v-model="formData.is_active">
                  <el-radio :label="true">在职</el-radio>
                  <el-radio :label="false">离职</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12"
            >
              <el-form-item label="排序" prop="no_order">
                <el-input-number v-model="formData.no_order" placeholder="请输入序号"
                                 :style="{width: '220px'}"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-table
            :data="formData.dept_role"
            size="mini"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="70">
            </el-table-column>
            <el-table-column
              prop="title"
              label="部门"
            >
              <template slot-scope="scope">
                <dept-select-tree :all-dept-list="deptList" v-model="formData.dept_role[scope.$index].dept" :disable-branch-nodes="true" v-if="loading"></dept-select-tree>
              </template>
            </el-table-column>
            <el-table-column
              prop="date"
              label="角色">
              <template slot-scope="scope">
                <simple-select :data-list="rolelist" v-model="formData.dept_role[scope.$index].role" :style="{width: '100%'}" multiple ></simple-select>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="80">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-delete"
                           @click="deleteLine(scope.$index)" ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: center; margin-top: 10px">
            <el-button type="primary" icon="el-icon-plus" @click="addLine" plain style="width: 50%" size="small"></el-button>
          </div>
        </el-form>
    </base-dialog>
</template>
<script>
    import BaseDialog from "@/components/Common/BaseDialog";
    import DetailDialog from "@/mixins/DetailDialog";
    import DeptSelectTree from '@/components/Common/DeptSelectTree'
    import SimpleSelect from '../../../../components/Common/SimpleSelect'
    import GenderFormItem from '../../../../components/FormItem/GenderFormItem'
    import user from "@/api/systemManagement/user/index";
    import role from "@/api/systemManagement/role/index";
    import {handleTree} from "@/utils/common";
    import XEUtils from 'xe-utils'
    export default {
        mixins: [DetailDialog],
        components: { GenderFormItem, SimpleSelect, DeptSelectTree, BaseDialog},
        data() {
            return {
                pickerOptions0: {
                  disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6
                  }
                },
                formData: {
                  alias: "",
                  dept: [],
                  is_active: true,
                  phone: "",
                  username: "",
                  identity:"",
                  role:[],
                  no_order:0,
                  xzjb:0,
                  tel:"",
                  gender:undefined,
                  idcard:undefined,
                  work_time:undefined,
                  birthday:undefined,
                  nation:undefined,
                  position:undefined,
                  zhiwu:undefined,
                  personnel_classification:1,
                  political_status:undefined,
                  dept_role:[{dept:undefined,role:[]}],
                  idcard_type:0
                },
                rules: {
                  username: {
                    required: true,
                    message: "请输入用户名",
                    trigger: "blur"
                  }
                },
                alias: {
                  username: {
                    required: true,
                    message: "请输入姓名",
                    trigger: "blur"
                  }
                },
                deptList:[],
                rolelist:[],
                loading:false
            }
        },
        computed: {
            title() {
                return this.disabled ? '查看' : this.formData.id ? "编辑" : "新增"
            },
        },
        watch: {},
        created() {
          this.getDeptsList()
          this.getRoleList()
        },
        mounted() {
        },
        methods: {
          getRoleList() {
            role.getSimpleList().then(res => {
              this.rolelist = res.data;
            })
          },
          getDeptsList() {
            user.getSimpleDeptList().then(res => {
                this.deptList =res.data
                this.loading = true;
            });
          },
          addLine() {
            this.formData.dept_role.push({
              dept: undefined,
              role: []
            })
          },
          deleteLine(index) {
            this.formData.dept_role.splice(index, 1)
          },
        }
    }
</script>
